// 创建匿名自执行函数。规定我们自己的代码作用域
/*
    1. 复选框的选择操作：单旋和全选
        1-1 全选 全选事件绑定
        1-2 获取全选框的状态
        1-3 将此状态赋值给下面的单选框
        1-5 通过事件委托的方式进行事件绑定
    2. 排序
        1-1 事件绑定
        1-2 再事件绑定里获取index值
*/
(function () {
    var checkAll = document.querySelector(".checkAll");
    var tbody = document.querySelector("tbody");
    var checks = document.querySelectorAll(".check");
    var thList = document.querySelectorAll("th");
    var trList = tbody.querySelectorAll("tr");
    var init = function () {// 程序入口
        initEvents();
    }
    var initEvents = function () {// 所有的时间函数都在这里进行绑定

        checkAll.addEventListener('click', onCheckAllClick);
        tbody.addEventListener('click', onCheckClick);
        for (let i = 0; i < thList.length; i++) {
            thHandleClick(thList[i], i);
        }

    }
    // 复选框全选事件
    var onCheckAllClick = function () {
        var isAllChecked = this.checked;
        for (let i = 0; i < checks.length; i++) {
            checks[i].checked = isAllChecked;
        }
    }
    // 复选框单选事件
    var onCheckClick = function (e) {
        // 时间目标获取，并且准确的找到复选框进行事件触发
        if (e.target.tagName !== 'INPUT') return;
        var checkedNum = 0;
        for (let i = 0; i < checks.length; i++) {
            checks[i].checked && checkedNum++;
        }
        // 根据已选中的个数，修改全选框的状态
        checkAll.checked = checkedNum == checks.length;

    }
    // 定义表头的点击事件
    var thHandleClick = function (ele, index) {
        if (index === 0) return;
        ele.addEventListener("click", function () {
            var arr = Array.prototype.slice.call(trList).sort(function (a, b) {
                var aStr = a.getElementsByTagName('td')[index].innerHTML;
                var bstr = b.getElementsByTagName('td')[index].innerHTML;
                if (index === 1 || index === 3) return aStr - bstr;
                return aStr.localeCompare(bstr,'ZH');
            });
            // 循环排序号的数组，进行插入操作
            for (let i = 0; i < arr.length; i++) {
                // 会将已有的DOM结构从原来的位置移动到容器的最后面
                tbody.appendChild(arr[i]);
            }
        });
    }

    init();

})()